<!--
 * @Description: 
 * @Author: hanyu
 * @Date: 2022-03-09 21:33:35
 * @LastEditTime: 2022-04-05 11:15:38
 * @LastEditors: hanyu
-->
<template>
    <div ref="dom" class="chart-box"></div>
</template>

<script>
import * as echarts from 'echarts';
import { on, off } from '@/lib/utils';
export default {
  // 扇形
  name: 'chartBar',
  props: {
    // map类型 keys 为图表x轴 values 为图表y轴数据
    value: {
      type: Array,
      require: true
    }
  },
  data() {
    return {
      dom: null
    };
  },
  watch: {
    value: {
      handler(e) {
        if (e) {
          this.setChart()
        }
      },
      immediate: true,
      deep: true,
    }
  },
  methods: {
    setChart() {
      let data = []
      // const tt = this.value.total
      for (let item of this.value) {
        data.push({
          name: item.cate_name,
          value: Number(item.total)
        })
      }
      this.$nextTick(() => {
        const option = {
          color: ['#29D3CE', '#F46C68', '#0064EF', '#0064EF'],
          tooltip: {
            trigger: 'item'
          },
          legend: {
            show: false
          },
          series: [
            {
              type: 'pie',
              radius: ['35%', '60%'],
              center: ['50%', '60%'],
              label: {
                alignTo: 'edge',
                formatter: '{d}%\n{b}',
                minMargin: 5,
                edgeDistance: 10,
                lineHeight: 15,
                rich: {
                  time: {
                    fontSize: 14,
                    color: '#9FA0A0'
                  },
                  name: {
                    fontSize: 14,
                    color: '#9FA0A0'
                  }
                }
              },
              labelLine: {
                show: true,
              },
              data: data
            }
          ]
        }
        this.dom = echarts.init(this.$refs.dom);
        this.dom.setOption(option);
        const self = this
        this.dom.on('click', function (params) {
          self.$router.push({
            name: 'WarningInfo',
            query: {
              cate_name: self.value[params.dataIndex].cate_name,
              cate_id: self.value[params.dataIndex].cate_id
            }
          })
        })
        on(window, 'resize', this.resize);
      });

    },
    resize() {
      this.dom.resize();
    }
  },
  mounted() {
  },
  beforeDestroy() {
    off(window, 'resize', this.resize);
  }
};
</script>

<style lang='less' scoped>
.chart-box {
  width: 100%;
  height: 100%;
  padding-top: 20px;
}
</style>